<template>
    <div>
        <el-page-header @back="gotoback" title="返回">
            <template #content>
                <el-breadcrumb-item :to="{ path: '/organization/user' }">新增用户</el-breadcrumb-item>
            </template>
        </el-page-header>
    </div>
    <div class="header">
        <el-row>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">名称</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">电话</span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground">
                    <el-input v-model="name" placeholder="在此输入用户名" @input="handlerChangeA" clearable style="height: 5vh;"
                        class="input" />
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground">
                    <el-input maxlength="11" show-word-limit v-model="phone" @input="handlerChangeB"
                        placeholder="在此输入用户手机号码" clearable style="height: 5vh;" class="input" />
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">性别</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">组织/职务</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground">
                    <el-select v-model="region" placeholder="选择性别" style="height: 5vh;width: 60vh;" class="input">
                        <el-option label="男" value="shanghai" />
                        <el-option label="女" value="beijing" />
                    </el-select>
                </div>
            </el-col>
            <el-col :span="12">
                <div style="margin-top: 3vh;">
                    <el-tag :key="obj.oid" v-for="obj in item">
                        {{ obj.oname }}-{{ obj.zname }}
                    </el-tag>

                </div>
                <el-button type="primary" plain size="small" 
                    @click="xuanzhe">请选择</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="back-ground wich">
                    <span class="span">操作</span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div style="margin-right: 70vh;padding: 2vh;">
                    <el-button type="primary" @click="add">新增</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 第一层弹出框 -->
    <el-dialog v-model="dialogVisibleA" title="选择组织·职务" :closeOnClickModal="false" v-if="dialogVisibleA"
        :destroy-on-close="true" width="40%">
        <div id="treeA">
            <el-skeleton :rows="8" :loading="loading" animated>
                <el-tree max-height="700" ref="tree" :default-checked-keys="checked" :data="data" @check-change="change"
                    :check-strictly="true" :default-expand-all="true" show-checkbox node-key='id' :props="defaultProps"
                    accordion>
                    <template #default="{ node, data }">
                        <span style="margin-left:10px" size="mini">{{ node.label }}</span>
                        <template v-for="obj in item">
                            <el-tag :key="obj.id" style="margin-left:10px" v-if="obj != '' && obj.oid == data.id"
                                size="mini">{{ obj.zname }}
                            </el-tag>
                        </template>
                    </template>
                </el-tree>
                <el-button id="btn" :disabled="disabled" type="primary" @click="save" size="mini" plain>
                    确认
                </el-button>
            </el-skeleton>
        </div>
    </el-dialog>
    <!-- 表格弹出框 -->
    <el-dialog title="选择职务" :showClose="false" :closeOnClickModal="false" v-model="dialogVisibleB" v-if="dialogVisibleB"
        :destroy-on-close="true" width="40%">
        <div id="treeB">
            <!-- 子组件 -->
            <zhiwu :lv="lv" :ids="ids" :names="names" @zhiwu="zhiwu"></zhiwu>
        </div>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { AddUser } from '../../../api/user/user'
import { GetOrganizations } from '../../../api/user/user'
import zhiwu from '../../../views/organization/user/zhiwu.vue'
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus'

export default defineComponent({
    components: { zhiwu },
    setup() {

        const data = reactive({
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            loading: false,//加载
            phone: '',//电话
            region: '',//性别
            name: '',//名称
            page: 1,//当前页
            dialogVisibleA: false,//第一层弹出框
            dialogVisibleB: false,//第二层弹出框
            checked: [], //单选框绑值
            data: [],//存放数据
            disabled: true,//true打开禁用
            item: [],
            ids: '',
            names: '',
            lv: "",
            adds: true,

        })
        const events = {
            gotoback() {
                window.history.go(-1)
            },
            //新增
            add() {
                let orgs = [];
                data.item.forEach((res: any) => {
                    orgs.push({ orgid: res.oid, zhiwuid: res.zid });
                })
                AddUser({
                    phone: data.phone,
                    gender: data.region,
                    name: data.name,
                    orgs: orgs
                }).then((res: any) => {
                    console.log('新增用户----', res)
                    if (res.result == 0) {
                        ElMessage({
                            message: '添加成功!',
                            type: 'success',
                        })
                    } else {
                        ElMessage.error({
                            message: '添加失败!',
                            type: 'error',
                        })
                    }
                })
            },
            //点击选择触发弹出框
            xuanzhe() {
                data.dialogVisibleA = true;
            },
            //树形控件
            tree() {
                GetOrganizations({
                    page: data.page,
                    limit: 999,
                }).then((res: any) => {
                    console.log("获取组织-----", res)
                    if (res.result == 0) {
                        data.data = res.data.data
                    }
                })
            },
            //监听姓名框
            handlerChangeA() {
                console.log("a")
                if (data.name != "" && data.phone.length == 11 && data.item.length > 0) {
                    data.adds = false;
                } 
            },
            //监听手机号
            handlerChangeB() {
                console.log("b")
                if (data.name != "" && data.phone.length == 11 && data.item.length > 0) {
                    data.adds = false;
                }
            },
            //点击确认
            save() {
                data.dialogVisibleA = false;

                if (data.name != "" && data.phone.length == 11 && data.item.length > 0) {
                    data.adds = false;
                }
            },
            //子组件
            zhiwu(obj: any) {
                data.disabled = false;
                if (data.item.find((d: any) => d.oid == obj.oid) == undefined) {
                    console.log(data.item.find((d: any) => d.name == obj.name))
                    data.item.push(obj);
                } else {
                    data.item = [];
                    data.item.push(obj);
                }
                data.dialogVisibleA = true;
                data.dialogVisibleB = false;
                console.log("职务已选好--", this.item)
            },
            //节点选中状态发生变化时的回调
            change(item, bool) {
                console.log(item, bool);
                if (data.checked.find((d: any) => d == item.id) == undefined) {
                    data.checked.push(item.id);
                }
                if (bool) {
                    data.dialogVisibleA = false;
                    data.dialogVisibleB = true;
                    data.lv = item.lv;
                    data.ids = item.id;
                    data.names = item.name;
                } else {
                    console.log("前", data.checked);
                    for (let i = 0; i < data.checked.length; i++) {
                        if (item.id == data.checked[i]) {
                            data.checked.splice(i, 1)
                        }
                        if (data.item.length > 0) {
                            if (item.id == data.item[i].oid) {
                                data.item.splice(i, 1)
                            }
                        }
                    }
                    console.log("后", data.checked);
                }
            }

        }
        onMounted(() => {

            events.tree()
        })
        return {
            ...events,
            ...toRefs(data)
        }
    }
})
</script>
<style scoped>
.header {
    border: #ccc solid 1px;
    margin-top: 3vh;
    border-radius: 5px;
}

.back-ground {
    border: #efebeb solid 1px;
    height: 50px;
}

.span {
    float: left;
    margin-top: 2vh;
    margin-left: 1vh;
    color: #c4c7d0;
}

.wich {
    background-color: rgba(240, 239, 245, 0.479);
}

.input {
    margin-top: 2vh;
}

#treeA {
    padding: 10px;
    border: 1px solid #eee;
    margin: 0px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

#treeB {
    padding: 10px;
    border: 1px solid #eee;
    margin: 0px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>
